<template>
  <div class="pd-20">
    <el-input v-model="searchCondition"
              placeholder="请输入药品名称"
              class="w-200"
              clearable
              @clear="query" />
    <el-button type="primary"
               @click="query">查 询</el-button>
    <el-button type="primary"
               @click="editDrugType(null)">新 增</el-button>
    <el-table stripe
              border
              :data="dataList"
              style="width: 100%"
              class="mt-20">
      <el-table-column align="center"
                       label="图标"
                       width="100px"
                       heitht="50px">
        <template slot-scope="scope">
          <el-image :src="scope.row.imageUrl"
                    :preview-src-list="[scope.row.imageUrl]">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       prop="name"
                       label="名称"
                       min-width="100">
      </el-table-column>
      <el-table-column align="center"
                       prop="sortNum"
                       label="排序号"
                       min-width="100">
      </el-table-column>
      <el-table-column align="center"
                       prop="createTime"
                       label="录入时间"
                       min-width="120"
                       :formatter="formatterDate">
      </el-table-column>
      <el-table-column label="操作"
                       width="260"
                       align="center">
        <template slot-scope="scope">
          <el-button type="primary"
                     @click="editDrugType(scope.row)">编 辑
          </el-button>
          <el-button type="primary"
                     @click="configDrug(scope.row)">配置药品
          </el-button>
          <el-button type="danger"
                     @click="deleteData(scope.row.id)">删 除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <page @getList="initTableData"
          :pageTotal="totals"
          ref="page"></page>
    <el-dialog title="药品详情"
               width="40%"
               :close-on-click-modal="false"
               :visible.sync="dialogFormVisible">
      <el-form :model="editMod">
        <el-form-item :label-width="formLabelWidth"
                      label="图标">
          <el-upload class="avatar-uploader"
                     :action="imageUploadUrl"
                     :show-file-list="false"
                     :on-success="handleAvatarSuccess"
                     :before-upload="beforeAvatarUpload">
            <img v-if="editMod.imageUrl"
                 :src="editMod.imageUrl"
                 class="avatar">
            <i v-else
               class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <el-form-item :label-width="formLabelWidth"
                        label="名称">
            <el-input v-model="editMod.name"></el-input>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth"
                        label="排序号">
            <el-input v-model="editMod.sortNum"></el-input>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth"
                        label="备注">
            <el-input type="textarea"
                      v-model="editMod.remark"></el-input>
          </el-form-item>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="saveData()">保 存</el-button>
      </div>
    </el-dialog>

    <el-dialog title="药品配置"
               width="40%"
               :close-on-click-modal="false"
               :visible.sync="configVisible">
      <el-form :model="configMod">
        <el-form-item :label-width="formLabelWidth"
                      label="图标">
          <img v-if="configMod.imageUrl"
               :src="configMod.imageUrl"
               class="avatar">
        </el-form-item>
        <el-form-item :label-width="formLabelWidth"
                      label="名称">
          <el-input v-model="configMod.name"
                    readonly></el-input>
        </el-form-item>
      </el-form>

      <el-select v-model="selectDrugLib"
                 filterable
                 placeholder="请选择"
                 @change="configDrugData">
        <el-option v-for="item in drugLibList"
                   :key="item.id"
                   :label="item.name"
                   :value="item.id">
        </el-option>
      </el-select>

      <el-table stripe
                border
                :data="drugTypeLibList"
                style="width: 100%"
                class="mt-20">
        <el-table-column align="center"
                         label="图标"
                         width="100px"
                         heitht="50px">
          <template slot-scope="scope">
            <el-image :src="scope.row.imageUrl"
                      :preview-src-list="[scope.row.imageUrl]">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         prop="name"
                         label="名称"
                         min-width="100">
        </el-table-column>
        <el-table-column align="center"
                         prop="factoryName"
                         label="厂商"
                         min-width="120">
        </el-table-column>
        <el-table-column align="center"
                         prop="drugBrandName"
                         label="品牌"
                         min-width="120">
        </el-table-column>
        <el-table-column label="操作"
                         min-width="100"
                         align="center">
          <template slot-scope="scope">
            <el-button type="danger"
                       @click="deleteConfigData(scope.row.id)">删 除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <page @getList="initDrugTypeLibTableData"
            :pageTotal="drugTotals"
            ref="page"></page>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="configVisible = false">关 闭</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import Page from '@/base/page/page'
  import { mapGetters } from 'vuex'

  export default {
    name: "drugTypeList",
    data () {
      return {
        searchCondition: '',
        totals: 0,
        drugTotals: 0,
        pageSize: 10,
        dataList: [],
        loading: false,
        dialogFormVisible: false,
        configVisible: false,
        editMod: {},
        configMod: {},
        formLabelWidth: '120px',
        imageUploadUrl: this.api.hospitalManager.uploadImg,
        drugTypeLibList: [],
        drugLibList: [],
        drugLibName: "",
        selectDrugLib: null
      }
    },
    created () {
      this.initTableData();
    },
    methods: {
      query () {
        this.page.pageIndex = 0;
        this.initTableData();
      },
      initDrugLib () {
        let param = {
          name: this.drugLibName,
          drugTypeId: this.configMod.id,
          pageSize: 50,
          pageIndex: 0
        };
        this.post(this.api.drug.getUnConfigDrugList, param).then((res) => {
          if (res.data.code === '200') {
            this.drugLibList = res.data.object;
            this.totals = res.data.totalNum;
          } else {
            this.$Message.error(res.data.message);
          }
        });
      },
      initTableData () {
        let param = {
          name: this.searchCondition,
          pageSize: this.page.pageSize,
          pageIndex: this.page.pageIndex
        };
        this.post(this.api.drug.getDrugTypePageApp, param).then((res) => {
          if (res.data.code === '200') {
            this.dataList = res.data.object;
            this.totals = res.data.totalNum;
          } else {
            this.$Message.error(res.data.message);
          }
        });
      },
      formatterDate (row) {
        return this.commonFunction.timestampFormat(new Date(row.createTime), 'yyyy-MM-dd hh:mm:ss')
      },
      editDrugType (data) {
        if (data) {
          this.editMod = data;
        } else {
          this.editMod = {
            imageUrl: "",
            name: "",
            remark: "",
            sortNum: null
          };
        }
        this.dialogFormVisible = true;
      },
      configDrug (data) {
        if (data) {
          this.configMod = data;
          this.initDrugTypeLibTableData();
          this.initDrugLib();
          this.configVisible = true;
        } else {
          this.$Message.error("请选择需要配置药品的类型");
        }
      },
      initDrugTypeLibTableData () {
        this.drugTypeLibList = [];
        let param = {
          drugTypeId: this.configMod.id
        };
        this.post(this.api.drug.getDrugTypeLibList, param).then((res) => {
          if (res.data.code === '200') {
            this.drugTypeLibList = res.data.object;
            this.drugTotals = res.data.totalNum;
          } else {
            this.$Message.error(res.data.message);
          }
        });
      },

      deleteData (id) {
        let param = {
          id: id
        };
        this.post(this.api.drug.deleteDrugType, param).then((res) => {
          if (res.data.code === '200') {
            this.initTableData();
            this.$Message.success(res.data.message)
          } else {
            this.$Message.error(res.data.message);
          }
        });
      },
      saveData () {
        this.post(this.api.drug.saveDrugType, this.editMod).then((res) => {
          if (res.data.code === '200') {
            this.initTableData();
            this.$Message.success(res.data.message)
            this.dialogFormVisible = false;
          } else {
            this.$Message.error(res.data.message);
          }
        });
      },
      configDrugData (id) {
        let param = {
          drugTypeId: this.configMod.id,
          drugLibId: id
        }
        this.post(this.api.drug.saveDrugTypeLib, param).then((res) => {
          if (res.data.code === '200') {
            this.initDrugTypeLibTableData();
            this.initDrugLib();
            this.selectDrugLib = null;
            this.$Message.success(res.data.message)
            this.dialogFormVisible = false;
          } else {
            this.$Message.error(res.data.message);
          }
        });
      },
      deleteConfigData (id) {
        let param = {
          id: id
        };
        this.post(this.api.drug.deleteDrugTypeLib, param).then((res) => {
          if (res.data.code === '200') {
            this.initDrugTypeLibTableData();
            this.initDrugLib();
            this.$Message.success(res.data.message)
          } else {
            this.$Message.error(res.data.message);
          }
        });
      },
      handleAvatarSuccess (res) {
        this.editMod.imageUrl = res.data;
      },
      beforeAvatarUpload (file) {
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isLt2M;
      },
    },
    computed: {
      ...mapGetters(['page'])
    }
    ,
    components: {
      Page,
    }
  }
</script>

<style scoped>
</style>
